<template>
    <rx-layout :leftStyle="{width:'230px'}">
        <template #left >
            <rx-category-treeeditor
                cat-key="BPM"
                :statisticConfig="statisticConfig"
                read-key="inst.read"
                :edit="false"
                @handSelect="handSelect"
                :treeRootList="treeRootList"
                :isBpmClient="isBpmClient"
                :isMyBpm="isMyBpm"
                :async="true">
            </rx-category-treeeditor>
        </template>
        <template #middle>
            <div style="padding: 10px;width: 100%;height: 100%">
                <rx-fit v-model="fitSearch">
                    <template #head>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div class="table-operator">
                                {{i18n('list.auditTrail','我的跟踪')}}
                            </div>
                            <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                        </div>
                    </template>
                    <template #search>
                        <a-form layout="vertical">
                            <a-form-item :label="i18n('form.itemTitle','事项标题')">
                                <a-input :placeholder="i18n('form.itemTitle','事项标题','input')"
                                         v-model:value="urlConfig.queryParam['Q_b.SUBJECT__S_LK']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('form.bsNum','单号')">
                                <a-input :placeholder="i18n('form.bsNum','单号','input')"
                                         v-model:value="urlConfig.queryParam['Q_b.BILL_NO__S_LK']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('list.createTime','创建时间') + i18n('list.from','从')" @mousedown.stop>
                                <a-date-picker
                                    :locale="locale"
                                    :getPopupContainer="getPopupContainer"
                                    style="width: 100%"
                                    v-model:value="urlConfig.queryParam['Q_b.CREATE_TIME__D_GE']"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    :placeholder="i18n('list.createTime','请输入任务创建时间','input')"
                                />
                            </a-form-item>
                            <a-form-item :label="i18n('list.to','至')" @mousedown.stop>
                                <a-date-picker
                                    :locale="locale"
                                    :getPopupContainer="getPopupContainer"
                                    style="width: 100%"
                                    :placeholder="i18n('list.createTime','请输入任务创建时间','input')"
                                    v-model:value="urlConfig.queryParam['Q_b.CREATE_TIME__D_LE']"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </a-form-item>
                        </a-form>
                        <div class="list-search-toolbar">
                            <a-button type="primary" @click="search">
                                <SearchOutlined/>
                                {{ $ti18('rxList.searchBtn', '查询') }}
                            </a-button>
                            <a-button style="margin-left: 4px" @click="resetSearch">
                                <RedoOutlined />
                                {{ $ti18('rxList.resetBtn', '重置') }}
                            </a-button>
                        </div>
                    </template>
                    <template #middle>
                        <rx-grid ref="table"
                                 :hasPage="true"
                                 :urlConfig="urlConfig"
                                 :selectConfig="selectConfig"
                                 url="/api-bpm/bpm/core/bpmInstTracked/getMyTracked"
                                 field="hisId"
                                 :columns="columns"
                        >
                            <template #curNode="{row}">
                                {{$i18(row.curNode,"处理步骤")}}
                            </template>
                            <template #subject="{row}">
                                <a href="javascript:;"  @click="openDetail(row.appId,row.instId)" >{{row.bpmInst.subject}}</a>
                            </template>
                            <template #billNo="{row}">
                                {{row.bpmInst.billNo}}
                            </template>
                            <template #action="{ row }">
                                <RxGridAction :size="2">
                                    <a href="javascript:;"  @click="removeTracked(row.instId)" :title="i18n('list.removeTracked','取消')" >{{i18n('list.removeTracked','取消')}}</a>
                                </RxGridAction>
                            </template>
                        </rx-grid>
                    </template>
                </rx-fit>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import {RxLayout, RxLangInput, RxFit,BaseList,Util} from '@lowcode/jpaas-base-lib';
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js"
import { App } from '@lowcode/jpaas-share-component';
import TaskBatApprove from "@/views/modules/bpm/ws/TaskBatApprove.vue";
import userUser from "@/stores/userUser";
import { mapState } from 'pinia';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import instAndTaskShare from "@/views/modules/column/processOverview/instAndTaskShare.js";
import  rxCategoryTreeeditor from "@/views/modules/column/processOverview/rx-category-treeeditor.vue"
import myBpmApi from "@/views/modules/bpm/js/myBpm";

export default {
    name: "MyBpmTracked",
    components: {RxLayout, RxFit, RxLangInput,rxCategoryTreeeditor},
    mixins: [BaseList,App,FlowUtil,instAndTaskShare],
    computed:{
        ...mapState(userUser, ['user'])
    },
    data() {
        return {
            locale,
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            columns: [
                {
                    title: this.i18n('form.itemTitle', '事项标题'),
                    field: 'subject',
                    minWidth: 180,
                    slots: {default: 'subject'},
                },
                {
                    title: this.i18n('form.bsNum', '单号'),
                    field: 'billNo',
                    minWidth: 180,
                    slots: {default: 'billNo'},
                },
                {
                    title: this.i18n('form.processTime','处理时间'),
                    field: 'createTime',
                    minWidth: 120,
                },
                {
                    title: this.i18n('form.curNode','处理步骤'),
                    field: 'curNode',
                    minWidth: 180,
                    slots: {default: 'curNode'},
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    field: 'action',
                    minWidth: 120,
                    allowCellEdit: false,
                    slots: {default: 'action'},
                },
            ],
            treeRootList:[],
            statisticConfig: {
                type:"static_bpm",
                appIdPrefix:'t.',
                table:"BPM_INST_TRACKED a JOIN BPM_INST t on a.INST_ID_ = t.INST_ID_",
                field:"t.TREE_ID_",
                whereConf:[{name:"CREATE_BY_",alias:"a.CREATE_BY_",type:"string",dateFormat:"",op:"=",value:"curUserId",valueType:"context"}]
            },
            readType:"instTracked",
            isBpmClient:false,
            isMyBpm:true,
        }
    },
    created() {
        this.urlConfig.queryParam = {};
        this.urlConfig.queryParam["Q_a.CREATE_BY__S_EQ"]=this.user.userId;
        let appId=this.curApp.appId;
        if(appId){
            this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"MyTracked",key);
        },
        handleTask(record) {
            this.openInst(record.appId,record.instId,record.taskId);
        },
        resetSearch() {
            this.urlConfig.queryParam = {};
            this.urlConfig.queryParam["Q_a.CREATE_BY__S_EQ"]=this.user.userId;
            let appId=this.curApp.appId;
            if(appId){
                this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
            }
            this.$nextTick(() => {
                this.$refs['table'].loadData();
            })
        },
        getPopupContainer(p){
            return p.parentNode ;
        },
        handSelect(curRow) {
            this.loadDataBySelectTreeNode(curRow);
        },
        removeTracked(instId){
            var self_=this;
            this.$confirm({
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: this.i18n('msa.confirmCancelTips','确认取消跟踪吗?'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk(){
                    myBpmApi.removeTracked(instId).then(res=>{
                        self_.search();
                    })
                }
            });
        },
    },
    watch: {},
}
</script>

<style scoped>

</style>
